<template>
  <div>
    <h1>· 奖品信息</h1>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in this.prizeList" :key="item.id">
          <div class="view">
            <span class="index">{{ index + 1 }}.</span>
            <label>{{ item.prizeGrade }}  {{ item.gift }}  {{ item.number }}个</label>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
    export default {
        name: "GiftDesc",
        data(){
            return{
                prizeList:null
            }
        },
      methods:{
        getPrizeList() {
          fetch("http://localhost:9090/getPrizeList").then(response => {
            response.json().then(data => {
              console.log("PrizeSetting加载后台prizeList", data);
              this.prizeList = data;
              this.tableData = this.prizeList;
            })
          }).catch(err => {
            console.log(err);
          })
        },
      },

      created() {
          this.getPrizeList();
      }

      // mounted(){
        //     const storedData = localStorage.getItem('prizeList');
        //     this.prizeList = JSON.parse(storedData);
        // }
    }
</script>

<style scoped>
  .main {
    position: relative;
    z-index: 2;
  }

  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  .todo-list li {
    position: relative;
    font-size: 24px;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;
  }

  .todo-list li:last-child {
    border-bottom: none;
  }

</style>